<!-- components/navigation/MobileMenuToggle.vue -->
<template>
  <div class="mobile-menu-toggle" @click="toggleMenu">
    <el-button 
      circle 
      class="mobile-toggle-btn"
      :icon="isOpen ? Close : Menu"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { Menu, Close } from '@element-plus/icons-vue'

const props = defineProps<{
  isOpen: boolean
}>()

const emit = defineEmits<{
  (e: 'toggle'): void
}>()

const toggleMenu = () => {
  emit('toggle')
}
</script>

<style scoped>
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2001;
}

.mobile-toggle-btn {
  background: var(--primary-blue, #1890ff);
  color: white;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.mobile-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

/* 移动端适配 */
@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: block;
  }
}
</style>